<template>
  <div class="big">
    <h1>For class</h1>
    <div class="box1">
      <a href="https://gitee.com/a2178858383/vue-project/tree/main/project-1" target="_blank">访问我的gitee仓库</a>
    </div>
    <h2>备忘事项</h2>

    <TodoItems :todos="filteredTodos" @removeTodo="removeTodo" />
    <TodoForm @addTodo="addTodo" />
  </div>
</template>

<script>
import TodoItems from './TodoItems.vue';
import TodoForm from './TodoForm.vue';

export default {
  components: {
    TodoItems,
    TodoForm
  },
  data() {
    return {
      todos: [],
    };
  },
  computed: {
    filteredTodos() {
      return this.todos.filter(todo => todo.text.trim() !== '');
    }
  },
  methods: {
    addTodo(newTodo) {
      const id = Date.now();
      this.todos.push({ id, text: newTodo });
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  },
  created() {
    console.log('组件已创建');
  }
};
</script>

<style scoped>
.big {
  border-style: solid;
  border-width: 1px;
  border-color: aqua;
  width: 525px;
  height: auto;
  padding: 20px;
  background-color: #fff;
  margin-top: 50px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.box1 a {
  text-align: center;
  text-decoration: none;
  color: #333;
}
</style>
